<template>
	<view class="">
		<view class="sub-yue">
			<view class="sub-yue-top u-flex">
				<text>约球开台</text>
				<view class="right-icon">
					<u-icon @click="closeSubYue" name="close" color="#333333" size="18"></u-icon>
				</view>
			</view>
			<view class="sub-door">
				<view class="door-tit">
					PK规则
				</view>
				<view class="pk-rule">
					邀约一起玩可以保存各方的PK信息，支持设定PK付款规则，邀约需 各方支付押金
				</view>
				<view class="pk-type" :class="{'pk-type-act':selTypeId==item.id}" @click="selPkType(item)" v-for="item in typePkList" :key="item.id">
					{{item.name}}
					<image v-show="selTypeId==item.id" src="../../static/sel-time-icon.png" mode=""></image>
				</view>
			</view>
			<view class="pk-total">
				<view class="pk-price u-flex">
					<text>计费价格</text>
					<text>25.5元/小时</text>
				</view>
				<view class="pk-price-tips">
					按分钟收费，最低消费1元
				</view>
				<view class="pk-price u-flex">
					<text>押金</text>
					<text>66元</text>
				</view>
			</view>
			<view class="sub-door-pay u-flex">
				<view class="door-tit">
					支付方式
				</view>
				<view class="door-adres u-flex" @click="showDoor=true">
					<text>{{payVal}}</text>
					<u-icon name="arrow-right" color="#333333" size="14"></u-icon>
				</view>
			</view>
			<view class="check-area u-flex">
				<u-checkbox-group v-model="checked">
					<u-checkbox :checked="checked.length==1" shape="circle" activeColor="#FF7814" size="16"></u-checkbox>
				</u-checkbox-group>
				<view class="text-check">
					开台视为同意<text>《用户协议》</text>	及<text>《隐私政策》</text>
				</view>
			</view>
			<view class="sub-date-btm u-flex">
				<view class="">
					<view class="sub-date-btm-left u-flex">
						<view class="left-price">
							需付押金：<text>50</text>元
						</view>
						<text>结束即退押金</text>
					</view>
					<view class="tips-look u-flex">
						<text>查看明细</text>
						<u-icon name="arrow-up" color="#FF7814" size="10"></u-icon>
					</view>
				</view>
				<view class="sub-yue-btn" @click="toPlaying">
					立即开台
				</view>
			</view>
		</view>
		<u-picker :show="showDoor" :columns="columns" @cancel="showDoor=false" @confirm="selDoor"></u-picker>
	</view>
</template>

<script>
	export default {
		props:['notifyId'],
		data() {
			return {
				showSubYue:false, //开台弹窗
				typePkList:[
					{
						name:'输家付款',
						id:1
					},
					{
						name:'AA付款',
						id:2
					}
				],
				selTypeId:1,//选择pk方式id
				payVal:'微信支付',
				showDoor:false, //选择支付方式
				columns: [
					['微信支付', '支付宝']
				],
				checked:[''],
				
			}
		},
		onLoad(option) {
		},
		mounted() {
			this.selTypeId=this.notifyId;
			console.log(this.notifyId,'this.notifyId;')
			
		},
		methods:{
			
			//关闭开台
			closeSubYue(){
				this.$emit('closeSubYue')
			},
			//选择pk方式
			selPkType(data){
				this.selTypeId=data.id
			},
			//选择支付方式
			selDoor(val){
				this.payVal=val.value[0];
				this.showDoor=false
				console.log(val)
			},
			
			toPlaying(){
				console.log(1111)
				uni.navigateTo({
					url:"/page_subscribe/invitePage/invitePage"
				})
				this.closeSubYue()
			}
		}
	}
</script>

<style lang="scss" scoped>
	.sub-yue{
		padding: 20rpx 0 0 0;
		background-color: #EDEDED;
		.sub-yue-top{
			padding: 0 26rpx;
			justify-content: center;
			position: relative;
			.right-icon{
				position: absolute;
				right: 26rpx;
			}
		}
		
		.pk-total{
			padding: 24rpx 24rpx;
			background: #FFFFFF;
			border-radius: 8rpx;
			margin: 20rpx 26rpx;
			.pk-price{
				justify-content: space-between;
				text{
					font-size: 28rpx;
					color: #333333;
					&:nth-child(1){
						font-weight: 550;
					}
				}
			}
			.pk-price-tips{
				font-size: 22rpx;
				color: #666666;
				margin-bottom: 26rpx;
			}
		}
		.sub-door{
			padding: 24rpx 24rpx;
			background: #FFFFFF;
			border-radius: 8rpx;
			margin: 20rpx 26rpx;
			.door-tit{
				font-size: 28rpx;
				font-weight: 550;
				color: #333333;
				margin-bottom: 16rpx;
			}
			.pk-rule{
				font-size: 22rpx;
				color: #666666;
				margin-bottom: 16rpx;
			}
			.pk-type{
				width: 640rx;
				height: 72rpx;
				line-height: 72rpx;
				padding-left: 60rpx;
				background: #FFFFFF;
				border: 1rpx solid #DDDDDD;
				border-radius: 8rpx;
				font-size: 28rpx;
				color: #333333;
				margin-bottom: 24rpx;
				&:last-child{
					margin-bottom: 0;
				}
			}
			.pk-type-act{
				border: 1rpx solid #FF7814;
				position: relative;
				image{
					position: absolute;
					bottom: 0;
					right: 0;
					width: 33rpx;
					height: 34rpx;
				}
			}
		}
		.sub-date-btm{
			width: 750rpx;
			height: 98rpx;
			background: #FFFFFF;
			border: 1rpx solid #EEEEEE;
			box-shadow: 0px 0px 19rpx 1rpx rgba(0,0,0,0.1);
			padding: 0 26rpx;
			justify-content: space-between;
			box-sizing: border-box;
			margin-top: 20rpx;
			.sub-date-btm-left{
				align-items: baseline;
				.left-price{
					font-size: 26rpx;
					font-weight: 550;
					color: #333333;
					margin-right: 20rpx;
					text{
						font-size: 40rpx;
						color: #FF7814;
						font-weight: 550;
					}
				}
				>text{
					font-size: 22rpx;
					font-family: PingFang SC;
					color: #999999;
				}
			}
			.sub-yue-btn{
				width: 240rpx;
				height: 72rpx;
				line-height: 72rpx;
				background: #FF7814;
				border-radius: 36rpx;
				font-size: 32rpx;
				font-weight: bold;
				color: #FFFFFF;
				text-align: center;
			}
			.tips-look{
				font-size: 22rpx;
				color: #FF7814;
				text{
					margin-right: 10rpx;
				}
			}
		}
		.sub-door-pay{
			justify-content: space-between;
			padding: 30rpx 24rpx;
			background: #FFFFFF;
			border-radius: 8rpx;
			margin: 20rpx 26rpx 14rpx;
			.door-tit{
				font-size: 28rpx;
				font-weight: 550;
				color: #333333;
			}
			.door-adres {
				font-size: 28rpx;
			}
		}
		.check-area{
			margin: 10rpx 26rpx 28rpx;
			.text-check{
				font-size: 24rpx;
				color: #999999;
				text{
					color: #263BDF;
				}
			}
		}
	}
	
</style>